<template>
  <div>
    <h2>Provide/inject:{{ a }}</h2>
    <button @click="a++">改变a</button>
    <Child />
    <hr />
  </div>
</template>

<script>
import Child from "./Child";
export default {
  name: "Props",
  components: {
    Child,
  },
  data() {
    return {
      a: 1,
      b: 2,
      c: 3,
    };
  },
  methods: {
    changeA(num) {
      this.a += num;
    },
  },
  /* provide对象写法 */
  /* provide: {
    count: 0,
  }, */

  /* provide函数写法 */
  provide() {
    return {
      a: this.a,
      b: this.b,
      c: this.c,
      changeA: this.changeA,
    };
  },
};
</script>

<style></style>
